import React from 'react';
import { DonutChart } from 'bizcharts';

const data = [
  {
    type: '地磅',
    value: 50,
  },
  {
    type: '随手拍',
    value: 20,
  },
  {
    type: 'SIS',
    value: 20,
  },
  {
    type: '钉钉录入',
    value: 10,
  },
];

function LeftChart() {
  return (
    <DonutChart
      data={data}
      angleField="value"
      colorField="type"
      height={238}
      radius={1}
      innerRadius={0.6}
      legend={{
        visible: true,
        position: 'right-center',
        offsetX: -120,
      }}
      statistic={{
        title: {
          customHtml: () => '数据源总数',
          style: {
            fontSize: '14px',
            padding: 0,
            margin: '-10px 0 0',
          },
        },
        content: {},
      }}
      label={{
        type: 'inner',
        formatter: (angleField, colorField) => {
          const value = `${angleField.percent * 100}%`;
          return [value];
        },
      }}
    />
  );
}

export default LeftChart;
